<template>
	<view class="container" :style="{paddingTop: paddingTop + 'px'}">
		<uni-nav-bar :height="navBarHeight" left-icon="left" backgroundColor="transpant" color="#2e2e2e" :border="false" title="本地生活" @clickLeft="back" />
		<view class="container-box">
			<view class="input-box">
				<uni-easyinput 
					prefixIcon="search"
					trim="all" 
					type="text" 
					v-model="keywords" 
					placeholder="请输入您要搜索的店铺"
					clearable 
					:inputBorder="false" 
					:styles="{color: '#2e2e2e', backgroundColor: '#fff'}" 
					primaryColor="#969799" 
					confirmType="search"
					@confirm="search"
					@clear="search">
				</uni-easyinput>
			</view>
			<view v-if="banners.length > 0" class="uni-margin-wrap">
				<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="2000"
					:duration="500">
					<swiper-item v-for="item in banners" :key="item.id" >
						<img class="swiper-ad" :src="`${item.image}`" alt="" @click="toLink(item)"/>
					</swiper-item>
				</swiper>
			</view>
			<view v-if="subBanners.length > 0" class="sub-banners">
				<view v-for="(item,index) in subBanners" :key="item.id" class="banner-list" @click="toLink(item)">
					<image class="banner-list-img" :src="item.image" mode=""></image>
				</view>
			</view>
			<page-box-empty v-if="malls.length == 0 && loaded" title="没有找到您想要的店铺" sub-title="可以去首页看看" :show-btn="true" />
			<view v-else="malls.length > 0" class="mall-container">
				<view v-for="item in malls" :key="item.id" class="mall-list flex" @click="toDetail(item)">
					<image class="mall-list-avatar" :src="item.thumbnail" mode=""></image>
					<view class="mall-list-con">
						<view class="mall-list-head flex">
							<view class="mall-list-txt">{{item.name}}</view>
							<view v-if="(item.lat > 0 && item.lon > 0)" class="mall-list-txt">{{getSpace(item.lat, item.lon) < 1 ? '<1': getSpace(item.lat, item.lon)}}km</view>
						</view>
						<view class="mall-list-desc mall-list-txt grey">
							{{item.description ? item.description : item.area_address+item.address}}
						</view>
						<view class="mall-list-tags flex-center">
							<view v-if="item.category" class="tag">{{item.category.name}}</view>
							<view class="tag">{{item.back_independent === 1 ? '单店排单':'全网排单'}}</view>
							<view class="tag">让利{{item.back_ratio}}%</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { indexAds, shopList } from '../../http/apis.js';
	export default {
		name: 'mall',
		data() {
			return {
				banners: [],
				subBanners: [],
				keywords: '',
				malls: [],
				paddingTop: getApp().globalData.statusBarHeight,
				navBarHeight: getApp().globalData.navBarHeight,
				currentPage: 1,
				nextPage: 1,
				lon: 0, // 纬度
				lat: 0, // 经度
				loaded: false,
			}
		},
		onLoad() {
			this.getAds(2);
			this.getAds(3);
			uni.getLocation({
				type: 'wgs84',
				success: (res) => {
					console.log(res);
					this.lat = res.latitude;
					this.lon = res.longitude;
					this.getShopList();
				},
				fail: (res) => {
					console.log(res);
				},
			})
		},
		onReachBottom() {
			this.loadMore();
		},
		methods: {
			back() {
				const pages = getCurrentPages();
				if (pages.length > 1) {
					uni.navigateBack()
				} else {
					uni.switchTab({
						url: '/pages/index/index'
					})
				}
			},
			search() {
				this.currentPage = 1;
				this.getShopList();
			},
			getAds(id) {
				indexAds({display: id}).then(res => {
					if (id === 2) {
						this.banners = res;
					} else {
						this.subBanners = res;
					}
				})
			},
			requestShopList(params, callback) {
				shopList(params).then(res => {
					if (this.currentPage > 1) {
						this.malls = this.malls.concat(res.data)
					} else {
						this.malls = res.data || [];
					}
					this.nextPage = res.next_page;
					this.isLoading = false;
					this.loaded = true;
					if (callback) {
						callback()
					}
				}).catch(res => {
					this.isLoading = false;
					this.loaded = true;
				})
			},
			getShopList() {
				if (this.isLoading) return;
				this.isLoading = true;
				this.loaded = false;
				let params = {
					keywords: this.keywords,
					page: this.currentPage,
					lat: this.lat,
					lon: this.lon
				}
				if (this.currentPage === 1) this.malls = [];
				this.requestShopList(params, () => {
					if (this.keywords === "" && this.malls.length < 1 && this.currentPage === 1) {
						this.requestShopList({keywords:"", lat: "", lon:"", page: 1})
					}
				})
				// shopList(params).then(res => {
				// 	if (res.total < 1) {
						
				// 	}
				// 	if (this.currentPage > 1) {
				// 		this.malls = this.malls.concat(res.data)
				// 	} else {
				// 		this.malls = res.data || [];
				// 	}
				// 	this.nextPage = res.next_page;
				// 	this.isLoading = false;
				// 	this.loaded = true;
				// }).catch(res => {
				// 	this.isLoading = false;
				// 	this.loaded = true;
				// })
			},
			loadMore() {
				if (this.currentPage < this.nextPage && !this.isLoading) {
					this.currentPage += 1;
					this.getShopList()
				}
			},
			// 根据经纬度计算距离
			getSpace(lat, lon) {
				let s = 0;
				if ((this.lat > 0 && this.lon > 0) && (lat > 0 && lon > 0)) {
					let radLat1 = lat * Math.PI / 180.0;
					let radLat2 = this.lat * Math.PI / 180.0;
					let a = radLat1 - radLat2;
					let b = lon * Math.PI / 180.0 - this.lon * Math.PI / 180.0;
					s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +
						Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
					s = s * 6378.137;
					s = (Math.round(s * 10000) / 10000).toFixed(1);
				} 
				return s;
			},
			toDetail(item) {
				uni.navigateTo({
					url: "/pages/mall/detail?id=" + item.id
				})
			},
			toLink(item) {
				if (item.link) {
					uni.navigateTo({
						url: item.link
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.flex {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.flex-center {
		display: flex;
		align-items: center;
	}
	.box {
		background-color: #ffffff;
		border-radius: 16rpx;
		box-sizing: border-box;
	}
	.arrow {
		width: 12rpx;
		height: 24rpx;
	}
	.container {
		width: 100%;
		min-height: 100vh;
		padding: 196rpx 0rpx 50rpx 0rpx;
		box-sizing: border-box;
		background: linear-gradient(180deg, #FBDF4F -3%, rgba(248, 250, 253, 0.77) 27%, #F8FAFD 100%);
		position: relative;
	}
	.container-box {
		width: 100%;
		padding: 0 24rpx;
		box-sizing: border-box;
	}
	.input-box {
		width: 100%;
		height: 70rpx;
		margin-top: 20rpx;
		margin-bottom: 24rpx;
		border-radius: 35rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		::v-deep .uni-easyinput__content {
			background: #fff;
			border-radius: 35rpx;
		}
		::v-deep .uni-easyinput__content-input {
			font-size: 28rpx;
			color: #2e2e2e;
		}
	}
	.uni-margin-wrap {
		width: 100%;
		height: 346rpx;
		margin-bottom: 24rpx;
		.swiper {
			width: 100%;
			height: 346rpx;
			.swiper-ad {
				width: 100%;
				height: 346rpx;
				border-radius: 16rpx;
			}
		}
	}
	.sub-banners {
		width: 100%;
		margin-bottom: 20rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		flex-wrap: wrap;
		.banner-list {
			width: 344rpx;
			height: 158rpx;
			margin-bottom: 20rpx;
			.banner-list-img {
				width: 100%;
				height: 100%;
				border-radius: 16rpx;
			}
		}
	}
	.mall-container {
		width: 100%;
		.mall-list {
			width: 100%;
			height: 180rpx;
			margin-bottom: 52rpx;
			align-items: flex-start;
			.mall-list-avatar {
				width: 180rpx;
				height: 180rpx;
				margin-right: 24rpx;
				border-radius: 16rpx;
			}
			.mall-list-con {
				flex: 1;
				padding: 6rpx 22rpx 6rpx 0;
				box-sizing: border-box;
				.mall-list-txt {
					color: #2e2e2e;
					font-size: 28rpx;
					line-height: 40rpx;
					&.active {
						color: #FC4951;
					}
					&.grey {
						color: #979797;
						font-size: 24rpx;
					}
				}
				.mall-list-desc {
					width: 90%;
					height: 80rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical 
				}
			}
			.mall-list-tags {
				width: 100%;
				margin-top: 6rpx;
				.tag {
					padding: 0rpx 6rpx;
					box-sizing: border-box;
					background: rgba(252, 73, 81, 0.1);
					border-radius: 4rpx;
					margin-right: 16rpx;
					color: #FC4951;
					font-size: 24rpx;
					height: 40rpx;
					line-height: 40rpx;
				}
			}
		}
	}
</style>